<template>
  <div class="map-main">
    <div class="map-left">
      <baidu-map
        class="bm-view"
        :center="center"
        :double-click-zoom="double"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
      >
        <bm-marker
          v-for="item in map_list"
          :key="item.id"
          :position="{ lat: item.lat, lng: item.lng }"
          :icon="{ url: iconPng, size: { width: 36, height: 41 } }"
          @click="go(item, 'map')"
          @mouseout="item.show = false"
          @mouseover="item.show = true"
        >
          <bm-label
            v-if="item.show"
            :content="item.land_name"
            :labelStyle="{
              color: '#ff3a56',
              fontSize: '14px',
              border: 'none',
              background: 'rgba(255,255,255,.9)',
              padding: '4px',
            }"
            :offset="{ width: 40, height: 10 }"
          />
        </bm-marker>
      </baidu-map>
    </div>
    <div class="map-right">
      <div class="search">
        <img class="search-icon" src="~@img/resources/icon-search.png" alt="" />
        <el-input
          v-model="key_words"
          type="text"
          placeholder="请输入关键字"
          @keydown.enter.native="search"
          clearable
        ></el-input>
        <div class="high" @click="isHigh = !isHigh">
          高级筛选
          <img
            src="~@img/resources/icon-up.png"
            alt=""
            :class="[isHigh == true ? 'rotate init' : 'init']"
          />
        </div>
        <span @click="search">搜索</span>
      </div>

      <ul :class="[isHigh == true ? 'height' : '', 'options']">
        <li>
          <span>地块名称：</span>
          <el-input
            v-model="land_name"
            placeholder="请输入"
            type="text"
            @keydown.enter.native="search"
            clearable
          ></el-input>
        </li>
        <li>
          <span>所属县区：</span>
          <el-select v-model="district_name" clearable placeholder="请选择">
            <el-option
              v-for="item in options_district"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <span>用地性质：</span>
          <el-select v-model="land_nature" clearable placeholder="请选择">
            <el-option
              v-for="item in options_nature"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <el-button type="default" @click="clear">清空</el-button>
        </li>
        <!-- <li>
          <span>产业类型：</span>
          <el-cascader
            v-model="industry_name"
            :options="options_type"
            :props="{
              value: 'label',
              label: 'label',
            }"
            :show-all-levels="false"
            clearable
          ></el-cascader>
        </li>
        <li>
          <span>出让年限：</span>
          <el-select v-model="transfer_year_id" clearable placeholder="请选择">
            <el-option
              v-for="item in options_year"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <span>净用地面积：</span>
          <el-select v-model="total_area_id" clearable placeholder="请选择">
            <el-option
              v-for="item in options_area"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>

        <li>
          <el-button type="primary" @click="search">查询</el-button>
        </li> -->
      </ul>

      <div>
        <div class="tips">
          土地
        </div>

        <ul class="list" v-if="list.length != 0">
          <li v-for="item of list" :key="item.id">
            <div class="title" @click="go(item, 'list')">
              <span v-html="item.land_name"></span>
            </div>
            <div class="flex-li">
              <p>所属县区：<span v-html="item.district_name"></span></p>
              <p>用地性质：<span v-html="item.land_nature"></span></p>
            </div>
            <p class="industry_fen">
              总用地面积：<span v-html="item.total_area"></span>公顷
            </p>
            <span class="detail  go" @click="goDetails(item.id)">详情</span>
          </li>
        </ul>
        <div class="pagination" v-if="list.length != 0">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="per_page"
            layout=" prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
        <div class="empty" v-if="list.length == 0">
          <img src="~@img/public/img-empty.png" alt="" />
          <p>暂无符合筛选条件的载体资源</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import iconPng from "@img/public/icon-location.png";
import { SearchLand } from "@api/resources";
export default {
  data() {
    return {
      iconPng,
      double: "",
      center: { lng: 112.48699, lat: 37.94036 }, //经纬度
      zoom: 9, //地图展示级别
      value: "",
      isHigh: true,
      options_type: [],
      options_year: [
        {
          value: "0-5年",
          label: "0-5年",
        },
        {
          value: "6-10年",
          label: "6-10年",
        },
        {
          value: "11-15年",
          label: "11-15年",
        },
        {
          value: "16-20年",
          label: "16-20年",
        },
        {
          value: "20年以上",
          label: "20年以上",
        },
      ],
      options_nature: [
        {
          value: "农业用地",
          label: "农业用地",
        },
        {
          value: "工业用地",
          label: "工业用地",
        },
        {
          value: "商业用地",
          label: "商业用地",
        },
        {
          value: "建设用地",
          label: "建设用地",
        },
        {
          value: "旅游用地",
          label: "旅游用地",
        },
        {
          value: "居民用地",
          label: "居民用地",
        },
      ],
      options_area: [
        {
          value: "0-5公顷",
          label: "0-5公顷",
        },
        {
          value: "6-10公顷",
          label: "6-10公顷",
        },
        {
          value: "11-20公顷",
          label: "11-20公顷",
        },
        {
          value: "21-30公顷",
          label: "21-30公顷",
        },
        {
          value: "31-50公顷",
          label: "31-50公顷",
        },
        {
          value: "51-100公顷",
          label: "51-100公顷",
        },
        {
          value: "大于100公顷",
          label: "大于100公顷",
        },
      ],
      options_district: [
        // { label: "太原市", value: "太原市" },
        { label: "小店区", value: "小店区" },
        { label: "迎泽区", value: "迎泽区" },
        { label: "杏花岭区", value: "杏花岭区" },
        { label: "万柏林区", value: "万柏林区" },
        { label: "尖草坪区", value: "尖草坪区" },
        { label: "晋源区", value: "晋源区" },
        { label: "古交市", value: "古交市" },
        { label: "清徐县", value: "清徐县" },
        { label: "阳曲县", value: "阳曲县" },
        { label: "娄烦县", value: "娄烦县" },
        // { label: "综改示范区", value: "综改示范区" },
        { label: "中北高新区", value: "中北高新区" },
        { label: "西山示范区", value: "西山示范区" },
        { label: "清徐开发区", value: "清徐开发区" },
        { label: "阳曲示范区", value: "阳曲示范区" },
      ],
      list: [],
      map_list: [],
      total: 0,
      district_name: "",
      land_name: "",
      land_nature: "",
      industry_name: "",
      total_area_id: "",
      transfer_year_id: "",
      key_words: "",
      page: 1,
      per_page: 6,

      searchOptions: {
        district_name: "",
        land_name: "",
        land_nature: "",
        industry_name: "",
        total_area_id: "",
        transfer_year_id: "",
        key_words: "",
      },
    };
  },
  mounted() {
    this.SearchLand();
  },
  methods: {
    clear() {
      this.district_name = "";
      this.land_name = "";
      this.land_nature = "";
      this.industry_name = "";
      this.total_area_id = "";
      this.transfer_year_id = "";
      this.key_words = "";
      this.page = 1;
      this.searchOptions = {
        district_name: "",
        land_name: "",
        land_nature: "",
        industry_name: "",
        total_area_id: "",
        transfer_year_id: "",
        key_words: "",
      };
      this.zoom = 9;

      this.SearchLand();
    },
    search() {
      this.zoom = 9;
      this.searchOptions = {
        district_name: this.district_name,
        land_name: this.land_name,
        land_nature: this.land_nature,
        industry_name: this.industry_name,
        total_area_id: this.total_area_id,
        transfer_year_id: this.transfer_year_id,
        key_words: this.key_words,
      };
      this.page = 1;
      this.SearchLand();
    },

    async SearchLand() {
      this.map_list = [];
      this.list = [];
      this.size = 0;
      let res = await SearchLand({
        ...this.searchOptions,
        page: 1,
        per_page: 5000000,
      });
      if (res.code && (res.code == 4002 || res.code == 4004)) {
        this.list = [];
        this.map_list = [];
        this.total = 0;
      } else if (res.code && res.code != 0) {
        this.$message.error(res.msg);
        this.list = [];
        this.map_list = [];
        this.total = 0;
      } else {
        res.data_list.map((item) => {
          item.show = false;
        });
        this.map_list = [...res.data_list];
        this.total = res.size;
        this.list = [...res.data_list].splice(
          this.per_page * (this.page - 1),
          this.per_page
        );
      }
    },
    handleClick(val) {
      console.log(val.name);
    },
    goDetails(id) {
      this.$router.push({
        name: "land",
        params: { id },
      });
    },
    go(item, type) {
      if (item.lat != "" && item.lng != "") {
        this.center = { lat: item.lat, lng: item.lng };
        this.zoom = 20;
      } else {
        this.center = { lat: 35.853091, lng: 112.977747 };
        this.zoom = 7;
      }
      if (type == "map") {
        let index = this.list.findIndex((i) => {
          return item.id == i.id;
        });
        this.list.splice(index, 1);
        this.list.unshift(item);
      }
    },

    handleCurrentChange(val) {
      this.zoom = 9;

      this.page = val;
      this.SearchLand();
    },
  },
};
</script>
<style>
.list span em {
  color: #f73131 !important;
}
</style>
<style lang="less" scoped>
.tips {
  margin: 20px 0;
  text-align: left;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    box-sizing: border-box;
    position: relative;
    flex: 0 0 48%;
    padding: 15px 20px;
    height: 118px;
    text-align: left;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 10px;
    margin-bottom: 20px;
    .title {
      position: relative;
      max-width: 350px;
      padding-right: 65px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 18px;
      padding-bottom: 6px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
      border-bottom: 1px solid #ccc;
      cursor: pointer;

      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 1px;
        background: #446db3;
      }
    }
    p {
      margin-top: 10px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      // &:last-of-type {
      //   margin-top: 6px;
      // }
    }
    .flex-li {
      display: flex;
      p {
        flex: 1;
      }
    }
    span.go {
      position: absolute;
      right: 20px;
      top: 14px;
      width: 60px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
      background: #5889dc;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      border-radius: 4px;
    }
  }
}
.init {
  transition: 0.8s;
  transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
.rotate {
  transform: rotate(0);
  -moz-transform: rotate(0);
  -webkit-transform: rotate(0);
  -o-transform: rotate(0);
}

.bm-view {
  width: 100%;
  height: 100%;
  /deep/.BMapLabel {
    background-color: transparent !important;
    border: 0 !important;
    color: rgb(121, 22, 22) !important;
  }
}
.estimate_body {
  width: 100%;
}
.estimate_main {
  width: 100%;
  height: 100%;
}
.map-main {
  height: calc(100% - 60px);
  padding: 30px 20px;
  display: flex;
  .map-left {
    flex: 0 0 705px;
    background: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
    border-radius: 10px;
  }
  .map-right {
    flex: 0 0 815px;
    margin-left: 30px;
  }
}
.search {
  position: relative;
}
/deep/ .search .el-input {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 10px;
}

/deep/ .search .el-input__inner {
  height: 60px;
  line-height: 60px;
  padding-left: 80px;
  padding-right: 270px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;

  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 10px;
}
.search span {
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  height: 60px;
  line-height: 60px;
  background: #446db3;
  border-radius: 0px 10px 10px 0px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 2px;
  cursor: default;
}
.search .search-icon {
  position: absolute;
  left: 30px;
  top: 15px;
  z-index: 999;
  cursor: default;
}
.search .high {
  position: absolute;
  right: 150px;
  top: 0px;
  width: 115px;
  height: 60px;
  line-height: 60px;
  text-align: left;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 0.6);
  cursor: default;
  img {
    position: absolute;
    top: 28px;
    margin-left: 10px;
  }
}
// 输入框 选择框 样式修改
/deep/ .search .el-input__inner:focus,
/deep/.search .el-input__inner:hover {
  border-color: transparent;
  outline: 0;
}
// 输入框 选择框 样式修改
.options {
  height: 0;
  transition: 0.3s;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 28px 0 0;
  li {
    flex: 0 0 29%;
    margin-bottom: 8px;
    &:nth-of-type(4n) {
      flex: 0 0 10%;
    }
    span {
      display: inline-block;
      width: 85px;
      text-align: right;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 0.8);
      line-height: 34px;
    }
  }
}
.height {
  height: 42px;
}
/deep/ .el-button--default {
  width: 100px;
  height: 28px;
  line-height: 0px;
  border-radius: 4px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.38);
  border-color: transparent;
}
/deep/ .el-button--primary {
  width: 100px;
  height: 28px;
  line-height: 0px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  border-radius: 4px;
  background-color: #446db3;
  border-color: transparent;
}
/deep/.options .el-input {
  display: inline-block;
  width: 150px;
  height: 28px;
}
/deep/.options .el-input__inner {
  display: inline-block;
  width: 150px;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #cccccc;
  border-radius: 5px;
}
/deep/.options .el-input__inner:focus,
/deep/.options .el-input__inner:hover {
  border-color: #ccc;
  outline: 0;
}
// 修改选择框
/deep/ .options .el-input__icon {
  line-height: 28px;
}
//
/deep/ .options .el-icon-arrow-up:before {
  display: inline-block;
  width: 14px;
  height: 8px;
  content: "";
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .options .el-icon-arrow-down:before {
  display: inline-block;
  width: 14px;
  height: 8px;
  content: "";
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .options .el-select .el-input .el-select__caret {
  transform: rotateZ(0);
  -moz-transform: rotateZ(0);
  -webkit-transform: rotateZ(0);
  -o-transform: rotateZ(0);
}
/deep/ .options .el-select .el-input .el-select__caret.is-reverse {
  transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -webkit-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
}
// 选项卡样式修改
/deep/.el-tabs__item {
  padding: 0 35px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  height: 60px;
  line-height: 60px;
}
/deep/.el-tabs__item.is-active {
  font-weight: bold;
  color: #446db3;
}

/deep/.el-tabs__active-bar {
  height: 4px;
  background: #446db3;
}
/deep/ .el-tabs__nav-wrap {
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
}
/deep/ .el-tabs__nav-wrap::after {
  height: 0;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-tabs {
  width: 100%;
  .el-tabs__content {
    box-sizing: border-box;
    overflow: unset;
  }
}
/deep/.el-tabs__nav-scroll {
  padding-left: 30px;
}

// 表格分页样式修改
.el-pagination {
  text-align: right;
}
/deep/ .el-pager li {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
  margin: 0 8px;
}

/deep/ .el-pager li.active {
  color: #fff;
  background: #446db3;
  box-shadow: 0px 0px 3px 0px rgba(0, 50, 89, 0.4);
  border-radius: 6px;
}

/deep/ .el-pagination .el-icon-arrow-right:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-right.png") no-repeat center;
}
/deep/
  .el-pagination
  button:disabled.btn-next:hover
  .el-icon-arrow-right:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-right.png") no-repeat center;
}
/deep/.el-pagination .btn-next:hover .el-icon-arrow-right:before {
  background: url("~@img/atlas/sidenav-hover2.png") no-repeat center;
}
/deep/ .el-pagination .el-icon-arrow-left:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-left.png") no-repeat center;
}
/deep/
  .el-pagination
  button:disabled.btn-prev:hover
  .el-icon-arrow-left:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-left.png") no-repeat center;
}
/deep/.el-pagination .btn-prev:hover .el-icon-arrow-left:before {
  background: url("~@img/atlas/sidenav-hover1.png") no-repeat center;
}
/deep/.pagination .el-select .el-input.is-focus .el-input__inner {
  height: 30px;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/.pagination .el-input__inner {
  height: 30px;
  color: #666;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}

/deep/ .el-pagination .btn-next,
/deep/ .el-pagination .btn-prev {
  background-color: transparent;
}
/deep/ .el-pagination .btn-next i,
/deep/ .el-pagination .btn-prev i {
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/.search .el-input__suffix {
  right: 280px;
}
/deep/ .options .el-input,
/deep/ .options .el-input__inner {
  width: 140px !important;
}
.empty {
  text-align: center;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  img {
    margin-top: 70px;
    margin-bottom: 30px;
  }
}
.list li .industry_fen {
  margin-top: 6px;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
}
/deep/ .name-wrapper {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .map-main .map-left {
    flex: 0 0 450px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .map-main .map-right {
    flex: 0 0 670px;
  }

  /deep/ .options .el-input,
  /deep/ .options .el-input__inner {
    width: 94px !important;
  }
  .options li {
    flex: 0 0 26%;
  }
  .list {
    margin-bottom: 10px;
    padding-right: 10px;
    max-height: 400px;

    overflow-y: auto;
  }
  .list li {
    flex: 0 0 48%;
  }
  .list li .title {
    position: relative;
    max-width: 280px;
  }
  .list li .industry_fen {
    max-width: 100%;
  }
  .name-wrapper {
    max-width: 180px;
  }
  .list li p {
    font-size: 12px;
  }
  .options {
    margin: 16px 0 0;
  }
  .tips {
    margin: 10px 0;
  }
  .list li {
    padding: 4px 20px;
    height: 100px;
  }
  .options li span {
    width: 75px;
    font-size: 12px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .map-main .map-right {
    flex: 0 0 574px;
  }
  .options li span {
    font-size: 12px;
  }
  /deep/ .options .el-input,
  /deep/ .options .el-input__inner {
    width: 74px !important;
  }
  .name-wrapper {
    max-width: 430px;
  }
  .options li span {
    display: inline-block;
    width: 74px;
  }
  .list {
    height: 400px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .map-main .map-left {
    flex: 0 0 400px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .map-main {
    flex-direction: column;
    overflow-y: scroll;
  }
  .map-main .map-right {
    margin-top: 20px;
    margin-left: 0;
  }
  .list {
    height: 840px;
  }
  /deep/ .options .el-input,
  /deep/ .options .el-input__inner {
    width: 120px !important;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
}
</style>
